<template>
  <div class="dc-section-item">
    <div class="dc-section-item_title clearfix">
      <div class="dc-section-item_title_name" :class="{'is-center' : center}"
        v-if="name.length > 0 || nameDesc.length > 0">
        <p>{{name}}</p>
        <small v-if="nameDesc.length > 0">{{nameDesc}}</small>
      </div>
      <div v-if="title.length > 0"
        class="dc-section-item_title_custom">
        <div class="sectionTitle">{{title}}</div>
        <slot name="title"></slot>
      </div>
      <p class="dc-section-item_title_time"
        v-if="time.length > 0">{{time}}</p>
    </div>
    <div class="dc-section-item_body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
<script>
export default {
  componentName: 'section-item',
  props: {
    name: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    nameDesc: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    },
    center: {
      type: Boolean,
      default: false
    }
  }
}

</script>
<style lang="less">


.dc-section-item {
  // border-bottom: 1px #f1f3f7 solid;
  &_title {
    line-height: 20px;
    font-size: 18px;
    &&_tab {
      line-height: 32px;
      height: 32px;
    }
    &_name {
      float: left;
      height: 20px;
      font-size: 0;
      &.is-center {
        margin-left: 82px;
      }
      p {
        display: inline-block;
        font-size: 15px;
        color: #2b2c2e;
      }
      small {
        display: inline-block;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.5px;
        text-align: left;
        line-height: 16px;

        margin-left: 12px;
      }
    }
    &_custom {
      float: left;
      .sectionTitle {
        font-weight: bolder;
        font-size: 16px;
        color: #212121;
      }
    }
    &_time {
      float: right;
      height: 20px;
      margin-right: 10px;
      font-size: 12px;
      color: #99A2AA;
    }
  }
}

</style>
